<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/dist/css/AdminLTE.min.css">
    <!-- DataTables style -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/bower_components/datatables.net-bs/css/jquery.dataTables.min.css">
  <!-- DataTables style -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
  <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
        page. However, you can choose any other skin. Make sure you
        apply the skin class to the body tag so the changes take effect. -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/dist/css/skins/skin-blue.min.css">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="<%=request.getContextPath() %>/styles/plugins/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="<%=request.getContextPath() %>/styles/plugins/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<title>Insert title here</title>
</head>
<body>
<div class="container">
    <table id="myTable">
        <thead>
            <tr>
                <th>用户id</th>
                <th>登录名</th>
                <th>性别</th>
                <th>职业</th>
            </tr>
        </thead>
        <!-- dataTables goes here -->
    </table>
    <!-- add editor support by bootstrap -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="text_username">登录名</label>
                        <input type="text" name="text_username" class="form-control" id="text_username" placeholder="部门名称">
                    </div>
                    <div class="form-group">
                        <label for="text_gender">性别</label>
                        <input type="text" name="text_gender" class="form-control" id="text_gender" placeholder="上级部门">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>取消</button>
                    <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
    <!-- jQuery 3 -->
<script src="<%=request.getContextPath() %>/styles/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="<%=request.getContextPath() %>/styles/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- jQuery DataTables -->
<script src="<%=request.getContextPath() %>/styles/bower_components/datatables.net/js/jquery.dataTables.js"></script>
<!-- JQuery Slimscroll -->
<script src="<%=request.getContextPath() %>/styles/bower_components/jquery-slimscroll/jquery.slimscroll.js"></script>
    <script type="text/javascript">
	    $(document).ready(function(){
	    	// use server side paging
			$("#myTable").DataTable({
			    theme: "bootstrap",
			    serverSide: true,
			    paging: true,
			    ajax: {
			    	url: "<%=request.getContextPath() %>/index/data/tables/paging",
			    	type: "POST",
			    	data: function(d){
			    	   for(var key in d){
	                        if(key.indexOf("columns")==0||key.indexOf("order")==0||key.indexOf("search")==0){ //以columns开头的参数删除
	                            delete d[key];
	                        }
	                    }
			    		var searchParams = { // customize params
			    			page : d.start == 0 ? 1 : (d.start/d.length + 1),
			                rows : d.length
			            };
			    		if(searchParams){
			    			$.extend(d,searchParams);
			    		}
			    	},
			    	dataType: "json", // return as json
			    	dataFilter: function(resp){
			    		return resp;
			    	},
			    },
			    destory: true,
			    columns: [{data: "userId",render: function(){
			    	
			    }},{data: "userName"},{data: "userId"},{data: "userSalt"}],
			    // pageLength: 3 // initial records per page
	        });
	    	// add editor support by bootstrap
	    	$("table[id='myTable']").find("tbody").on("click","tr", function(){	
	    		var rowCells = new Array();
	    		var datas = new Array();
	    		var fields = new Array();
	    		rowCells = $(this).find("td");
	    		for(i=0;i<rowCells.length;i++){
	    			datas[i] = $(rowCells[i]).text();
	    			console.log("第"+i+"个数据："+datas[i]);
	    		}
	    		fields = $("#myModal").find("input");
	    		for(i=0;i<fields.length;i++){
	    			$(fields[i]).attr("value",datas[i]);
	    		}
	    		// show modal editor
	    		$("#myModal").modal();
	    		
	    	});
	    });
    </script>
</body>
</html>